<style scoped lang="stylus">
bg($img)
  background url('../assets/index/' + $img + '.png') no-repeat center
  background-size cover
bg-size($img, $w = 25px, $h = 25px)
  bg($img)
  width $w
  height $h
  content ''
  display block
  margin-bottom 18px
  z-index 2
.tabs
  max-width 750px;/*no*/
  margin 0 auto
  bottom 0
  width 100%
  height 110px
  background-color #eee
  z-index 1000

  .tab
    height 100%
    justify-content center
    position relative
    font-size 26px
    .relative
      z-index 2
    &.selected
      color #3f00f0
    &.recommend::before
      bg-size(recommend)
    &.movie::before
      bg-size(movie, 29px, 25px)
    &.series::before
      bg-size(series, 26px, 26px)
    &.task::before
      bg-size(task, 33px, 25px)
    &.mine::before
      bg-size(mine)
    &.recommend.selected::before
      bg(recommend_selected)
    &.movie.selected::before
      bg(movie_selected)
    &.series.selected::before
      bg(series_selected)
    &.task.selected::before
      bg(task_selected)
    &.mine.selected::before
      bg(mine_selected)
    &.selected
      &::after
        content ''
        display block
        position absolute
        bottom 0
        width 116px
        height 143px
        bg(tab_bg)
        z-index 1
</style>

<template lang="pug">
.tabs.fixed.flex
  .tab.flex-1.fz-16.flex.column(v-for="(tab, index) in tabs", :key="index",
    :class="[selected === tab.id ? 'selected': '', tab.key]", @click="selectTab(index, tab.id)")
      .relative {{tab.name}}
</template>

<script>
import { CHANNEL } from '../const'

export default {
  name: 'Tabs',

  props: {
    selected: {
      type: Number,
      default: CHANNEL.RECOMMEND
    }
  },

  data: () => ({
    selectedIndex: CHANNEL.RECOMMEND,
    tabs: [
      {
        key: 'recommend',
        id: CHANNEL.RECOMMEND,
        name: '精选',
        path: '/home',
        query: CHANNEL.RECOMMEND
      },
      {
        key: 'movie',
        id: CHANNEL.MOVIE,
        name: '电影',
        path: '/home',
        query: CHANNEL.MOVIE
      },
      {
        key: 'series',
        id: CHANNEL.SERIES,
        name: '电视剧',
        path: '/home',
        query: CHANNEL.SERIES
      },
      {
        key: 'task',
        id: CHANNEL.TASK,
        name: '任务',
        path: '/task'
      },
      // {
      //   key: 'mine',
      //   id: CHANNEL.MINE,
      //   name: '我的',
      //   path: '/mine'
      // }
    ]
  }),

  methods: {
    selectTab(index) {
      const { path, query } = this.tabs[index]
      let params = path
      if (query) {
        params = { path, query: { id: query } }
      }
      this.$router.push(params)
    }
  }
}
</script>
